<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        :rules="rules"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item label="客户编号" prop="customerSerialnumber">
          <el-input v-model="queryForm.customerSerialnumber" style="width: 100px;" />
        </el-form-item>
        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="queryForm.customerName" style="width: 100px;" />
        </el-form-item>
        <el-form-item label="表计地址" prop="archivesAddress">
          <el-input v-model="queryForm.archivesAddress" style="width: 100px;" />
        </el-form-item>

        <el-form-item label="统计周期" prop="cycle">
          <el-select v-model="queryForm.cycle" style="width: 100px;" @change="onCycleChange">
            <el-option label="日" value="0" />
            <el-option label="月" value="1" />
            <el-option label="季" value="2" />
            <!--            <el-option label="年" value="3"/>-->
          </el-select>
        </el-form-item>

        <el-form-item :label="'选择'+getCycleName()" prop="date">
          <el-date-picker
            v-model="queryForm.date"
            style="width: 130px;"
            type="date"
            value-format="yyyy-MM-dd"
            v-if="queryForm.cycle=='0'"
          />
          <el-date-picker
            v-model="queryForm.date"
            style="width: 110px;"
            type="month"
            value-format="yyyy-MM"
            v-if="queryForm.cycle=='1'"
          />
          <el-select v-model="queryForm.date" style="width: 110px;" v-if="queryForm.cycle=='2'">
            <el-option label="第一季度" value="0" />
            <el-option label="第二季度" value="1" />
            <el-option label="第三季度" value="2" />
            <el-option label="第四季度" value="3" />
          </el-select>
          <!--          <el-date-picker v-model="queryForm.date" style="width: 110px;" type="year"value-format="yyyy"  v-if="queryForm.cycle=='3'"/>-->
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleFormSubmit">
            <d2-icon name="search" />查询
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <split-pane :min-percent="10" :max-percent="20" :default-percent="20" split="vertical">
      <template slot="paneL">
        <my-area-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="onPageChange"
        ></d2-crud>
      </template>
    </split-pane>
  </d2-container>
</template>

<script>
import MyAreaTree from "@/components/my-area-tree";
import dayjs from "dayjs";

export default {
  name: "zerodosage",
  components: { MyAreaTree },
  data() {
    return {
      queryForm: {
        areaId: "1",
        customerName: "",
        customerSerialnumber: "",
        archivesAddress: "",
        cycle: "0",
        date: dayjs().format("YYYY-MM-DD")
      },
      rules: {
        cycle: [{ required: true, message: "必填", trigger: "blur" }],
        date: [{ required: true, message: "必填", trigger: "blur" }]
      },
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      columns: [
        {
          title: "序号",
          key: "serialNum",
          sort: true
        },
        {
          title: "区域名称",
          key: "areaName",
          sort: true
        },
        {
          title: "客户名称",
          key: "customerName",
          sort: true
        },
        {
          title: "客户编号",
          key: "customerSerialnumber",
          sort: true
        },
        {
          title: "表计地址",
          key: "serialnumber",
          sort: false
        },
        {
          title: "时间",
          key: "date",
          sort: true
        }
      ],
      data: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    getCycleName() {
      switch (this.queryForm.cycle) {
        case "0":
          return "日";
        case "1":
          return "月";
        case "2":
          return "季";
        case "3":
          return "年";
        default:
          return "日期";
      }
    },
    onAreaChange(data, node) {
      this.queryForm.areaId = data.id;
      this.fetchData();
    },
    onCycleChange() {
      this.queryForm.date = "";
    },
    handleFormSubmit() {
      this.$refs.queryForm.validate(valid => {
        if (valid) {
          this.fetchData();
        } else {
          return false;
        }
      });
    },
    fetchData() {
      this.loading = true;
      this.$api
        .admin_zeroDosage_getZeroDosagePageVO({
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          ...this.queryForm
        })
        .then(res => {
          this.data = res.data;
          this.pagination.total = res.total;
        })
        .catch(err => {
          console.log("err", err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onPageChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.fetchData();
    }
  }
};
</script>
